<template>
  <view class="information">
    <view class="title">
      14天后就诊
    </view>
    <view class="main">
      <view class="top">
        <view class="item">
          <view class="label">就诊院区：</view>
          <view class="value">雅安市人民医院（大兴院区）</view>
        </view>
        <view class="item">
          <view class="label">医院地址：</view>
          <view class="value">
            <view class="pst flexC">
              <img :src="`${$store.state.baseApi}/icon/navigation.png`" alt="">
              导航
            </view>
            四川省雅安市雨城区大兴镇健康路
          </view>
        </view>
        <view class="item">
          <view class="label">就诊科室：</view>
          <view class="value">骨科</view>
        </view>
        <view class="item">
          <view class="label">就诊位置：</view>
          <view class="value red">
            <view class="pst flexC" @click="$router.push('/pages/navInHsp/navInHsp')">
              <img :src="`${$store.state.baseApi}/icon/way.png`" alt="">
              路线
            </view>
            门诊三楼B区外科诊区
          </view>
        </view>
        <view class="item">
          <view class="label">预约医生：</view>
          <view class="value">肖友明（副主任医师）</view>
        </view>
        <view class="item">
          <view class="label">预约时间：</view>
          <view class="value red">2024-08-12（周一） 10:00～10:30</view>
        </view>
        <view class="item">
          <view class="label">序　　号：</view>
          <view class="value">10</view>
        </view>
      </view>
      
      <view class="line"></view>
      
      <view class="toDetail">
        查看挂号详情 >>
      </view>
      
      <view class="tip">
        <view class="tip-title">
          温馨提示
        </view>
        <view class="">
          1、无需取号，请提前30分钟到院签到候诊。 
        </view>
        <view class="">
          2、挂号当日当诊有效，复诊需重新挂号。复诊需重新挂号。当日号源不予退号退费，预约号源如需退号请在就诊日8:00前申请退号（预约费用不予退费）。 
        </view>
        <view class="">
          3、实际就诊时间以医院现场情况为准。
        </view>
      </view>
      
      <view class="component-qr">
      	<tki-qrcode
      		ref="qrcode"
      		onval
      		:val="qrCode"
      		:size="200"
      		:load-make="true"
      		:show-loading="false"/>
      </view>
      
      <view class="cardNo">
        门诊号：{{userInfo.cardNo}}
      </view>
      
      <view class="btn-box">
        <view class="left btn">
          取消预约
        </view>
        <view class="right btn">
          查看挂单号
        </view>
      </view>
    </view>
  </view>
  
</template>

<script>
import { mapGetters } from 'vuex';
import tkiQrcode from '@/components/QrCode/tki-qrcode.vue'
export default {
  components:{ tkiQrcode },
  computed:{
  	...mapGetters(['userInfo']),
    qrCode(){
    	return this.userInfo.cardNo||''
    	return this.userInfo.qrCodeText||''
    },
  }
}
</script>

<style lang="scss" scoped>
.information {
  width: 100%;
  border: 1px solid $theme-color;
  border-radius: 8upx;
  .title {
    line-height: 80upx;
    background-color: $theme-color;
    color: #FFF;
    text-align: center;
  }
}
.main {
  padding: 24upx;
  border-radius: 8upx;
}
.item {
  display: flex;
  margin-bottom: 24upx;
  .label {
    flex-shrink: 0;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 28upx;
    color: rgba(0,0,0,0.5);
    line-height: 44upx;
  }
  .value {
    flex: 1;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 28upx;
    color: rgba(0,0,0,0.7);
    line-height: 44upx;
    position: relative;
    .pst {
      align-items: center;
      float: right;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 24upx;
      color: #3E81F7;
      line-height: 44upx;
      // transform: translateX(8upx);
      margin-left: -8upx;
      margin-right: -8upx;
      >img {
        width: 32upx;
        height: 32upx;
      }
    }
  }
}
.line {
  height: 1px;
  // border-top: 1px dashed rgba(0,0,0,0.4);
  background-image: linear-gradient(to right, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.4) 60%, transparent 50%);
  background-size: 10px 1px;
  background-repeat: x-repeat;
}
.toDetail {
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 28upx;
  color: #3E81F7;
  line-height: 72upx;
  text-align: center;
}
.tip {
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 24upx;
  color: #F77E0D;
  line-height: 44upx;
  background: #FFFAF2;
  padding: 12upx 32upx;
  text-align: center;
  border-radius: 8upx;
  .tip-title {
    font-weight: 500;
    font-size: 28upx;
  }
  >view {
    display: inline-block;
    text-align: left;
  }
}
.component-qr{
  display: block;
  margin: 30rpx auto 0 auto;
  // border: 1px dashed #000000;
  padding: 4rpx;
  align-items: center;
  justify-content: center;
}
.cardNo {
  text-align: center;
  font-size: 28upx;
  color: rgba(0,0,0,0.7);
  line-height: 44upx;
  margin-top: 16upx;
}
.btn-box {
  display: flex;
  justify-content: space-around;
  margin: 64upx 0 22upx;
  .btn {
    width: 200upx;
    height: 54upx;
    line-height: 54upx;
    text-align: center;
    border-radius: 54upx;
    &.left {
      border: 1px solid $theme-color;
      color: $theme-color;
    }
    &.right {
      background-color: $theme-color;
      color: #FFF;
    }
  }
}
</style>